<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/BX_heard.css">
    <link rel="stylesheet" href="css/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layui/font">
    <link rel="stylesheet" href="css/page.css">
    <style>
        body {
            background: #f2f2f2;
        }

        .num {
            margin: 10px 1.2% 1.2% 11px;
            width: 97.6%;
            height: 61.5px;
            background: #ffffff;
            font: 18.5px/61.5px 'simhei';
        }

        .search {
            margin: 10px 1.2% 1.2% 11px;
            width: 97.6%;
            height: 61.5px;
            background: #ffffff;
        }

        .search .calendar {
            float: left;
            width: 12%;
            height: 38px;
            margin-top: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            margin-left: 0.5%;
        }

        .search i {
            float: left;
            width: 20%;
            font: 18.5px/38px 'simhei';
        }

        .search span {
            font: 13px/61.5px 'simhei';
            margin-left: 1%;
        }

        .search .kong {
            float: left;
        }

        .search input {
            height: 100%;
            width: 80%;
            border: none;
            border-radius: 5px;
            font-size: 14px;
        }

        .search p {
            width: 10%;
            margin-top: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            height: 38px;
            line-height: 38px;
            background: #429788;
            color: #ffffff;
            float: right;
            /* margin-right:3%; */
            cursor: pointer;
        }

        .search p i {
            margin-left: 15%;
        }

        .select {
            width: 20%
        }

        .select div {
            margin: 0px;
            width: 100%;
            border: 0px;
        }

        .select div input {
            width: 92%;
            margin: 0px;
            padding: 0px;
        }

        .select div strong {
            width: 3%;
        }

        #lxcselector1,
        #lxcselector2 {
            border: 1px solid #dcdfe6;
            height: 38px;
            margin-left: 5px;
            border-radius: 5px;
            width: 190px;
        }

        .num p {
            float: left;
        }

        .num p:nth-of-type(1) {
            margin-left: 7.8%;

        }

        .num p:nth-of-type(2) {
            color: #1756de;
            font: 22px/61.5px 'simhei';
        }

        .num p:nth-of-type(3) {
            margin-left: 15%;
        }

        .num p:nth-of-type(4) {
            color: #b539ee;
            font: 22px/61.5px 'simhei';
        }

        .num p:nth-of-type(5) {
            margin-left: 15%;
        }

        .num p:nth-of-type(6) {
            color: #ee0acf;
            font: 22px/61.5px 'simhei';
        }

        /*表格*/
        .chart {
            width: 97.6%;
            margin: 0px 1.2% 1.2% 11px;
            height: 280px;
            background: #ffffff;
            position: relative;
        }

        .table {
            width: 97.6%;
            margin-left: 0.8%;
            height: 500px;
            background: #ffffff;
            padding-top: 10px;
            position: relative;
        }

        .tableHead table {
            width: 98%;
            margin: auto;
            height: 39px;
            border: 1px solid #ebeef5;
            background: rgb(245, 247, 250);
            color: rgb(96, 98, 102);
        }

        .table tr:hover {
            background: rgb(245, 247, 250);
        }

        .tableHead table tr th:nth-of-type(1) {
            width: 3%;
        }

        .tableHead table tr th:nth-of-type(2) {
            width: 8%;
        }

        .tableHead table tr th:nth-of-type(3) {
            width: 5%;
        }

        .tableHead table tr th:nth-of-type(4) {
            width: 5%;
        }

        .tableHead table tr th:nth-of-type(5) {
            width: 12%;
        }

        .tableHead table tr th:nth-of-type(6) {
            width: 30%;
        }

        .tableHead table tr th:nth-of-type(7) {
            width: 12%;
        }

        .tableHead table tr th:nth-of-type(8) {
            width: 6%;
        }

        .tableHead table tr th:nth-of-type(9) {
            width: 8%;
        }

        .tableHead table tr th:nth-of-type(10) {
            width: 11%;
        }

        .tabletext table tr td:nth-of-type(1) {
            width: 3%;
        }

        .tabletext table tr td:nth-of-type(2) {
            width: 8%;
        }

        .tabletext table tr td:nth-of-type(3) {
            width: 5%;
        }

        .tabletext table tr td:nth-of-type(4) {
            width: 5%;
        }

        .tabletext table tr td:nth-of-type(5) {
            width: 12%;
        }

        .tabletext table tr td:nth-of-type(6) {
            width: 30%;
        }

        .tabletext table tr td:nth-of-type(7) {
            width: 12%;
        }

        .tabletext table tr td:nth-of-type(8) {
            width: 6%;
        }

        .tabletext table tr td:nth-of-type(9) {
            width: 8%;
        }

        .tabletext table tr td:nth-of-type(10) {
            width: 11%;
        }

        .table th,
        td {
            border: 1px solid #ebeef5;
        }

        .tabletext table {
            width: 98%;
            margin: auto;
            /* height:400px; */
            border: 1px solid #ebeef5;
            color: rgb(96, 98, 102);
            text-align: center;
            table-layout: fixed;
        }

        .tabletext tr {
            height: 40px;
        }

        #page {
            position: absolute;
            left: 1%;
            bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="heardFont">
        <span>业绩管理</span>
    </div>
    <div class="search clear">
        <span class="kong">选择日期</span>
        <div class="calendar">
            <i class="layui-icon layui-icon-date"></i><input type="text" class="layui-input" id="beginday"
                placeholder="请输入日期">
        </div>
        <span class="kong">-&nbsp</span>
        <div class="calendar">
            <i class="layui-icon layui-icon-date"></i>
            <input type="text" class="layui-input" id="beginday1" placeholder="结束日期">
        </div>
        <span>部门</span>
        <select name="" id="lxcselector1"></select>
        <!-- <input type="text" name="" id="lxcselector1"> -->
        <span>员工</span>
        <select name="" id="lxcselector2"></select>
        <!-- <input type="text" name="" id="lxcselector2"> -->
        <p id="search"><i class="layui-icon layui-icon-search"></i>&nbsp搜索</p>
    </div>
    <div class="num clear" id="Num">
        <p>报名量：</p>
        <p>100</p>
        <p>缴费量：</p>
        <p>100</p>
        <p>业绩：</p>
        <p>￥21,000</p>
    </div>
    <div class="chart" id="chart"></div>
    <div class="table">
        <div class="tableHead">
            <table>
                <tr>
                    <th></th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>毕业院校</th>
                    <th>专业</th>
                    <th>状态</th>
                    <th>紧急联系人</th>
                    <th>紧急联系人电话</th>
                </tr>
            </table>
        </div>
        <div class="tabletext">
            <table>
            </table>
        </div>
        <div class="page" id="page"></div>
    </div>

</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="css/layui/layui.js"></script>
<script src="js/echarts.js"></script>
<script src="js/xlPaging.js"></script>
<script src="./js/url.js"></script>
<script>
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 10, // 总页码
        buttonNum: 1, //要展示的页码数量
        canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
        showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            localStorage.pageNum = num;
        }
    });
    $("#page ").on("click", " ul li", function () {
        pageNum = localStorage.pageNum;
        pageAjax(pageNum)
    })
    function pageAjax(page) {
        $.ajax({
            url: SetUrl.quotaUrl.resultUrl,
            type: 'POST',
            dataType: 'json',
            data: {
                currentPage: page,
                row: '10',
                empId: localStorage.getItem("empId"),
                deptName: '市场部'
            },
            success: function (data) {
                if (data.code == 100) {
                    $(".tabletext").find('table').html('')
                    console.log(data)
                    var olist = data.result;
                    var num = 0;
                    for (var i = 0; i < olist.length; i++) {
                        num++;
                        var otr = $('<tr></tr>');
                        otr.appendTo($(".tabletext").find('table'));
                        $('<td>' + num + '</td>').appendTo(otr);
                        $('<td>' + olist[i].studentName + '</td>').appendTo(otr);
                        if (olist[i].studentSex == 1) {
                            var sex = '男'
                        } else {
                            var sex = '女'
                        }
                        $('<td>' + sex + '</td>').appendTo(otr);
                        $('<td>' + olist[i].age + '</td>').appendTo(otr);
                        $('<td>' + olist[i].telphone + '</td>').appendTo(otr);
                        $('<td>' + olist[i].schoolName + '</td>').appendTo(otr);
                        $('<td>' + olist[i].major + '</td>').appendTo(otr);
                        $('<td>' + olist[i].stateName + '</td>').appendTo(otr);
                        $('<td>' + olist[i].emergencyName + '</td>').appendTo(otr);
                        $('<td>' + olist[i].emergencyContact + '</td>').appendTo(otr);
                    }
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo)
            }
        })
    }
    $(function () {
        $.ajax({
            url: SetUrl.quotaUrl.apply,
            type: 'POST',
            dataType: 'json',
            data: {
                empId: localStorage.getItem("empId")
            },
            success: function (data) {
                console.log(data)
                $('#Num').find('p:eq(1)').html(data.baoming);
                $('#Num').find('p:eq(3)').html(data.yijiaofei);
                $('#Num').find('p:eq(5)').html("￥" + data.yeji);
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo)
            }
        })
        $.ajax({
            url: SetUrl.quotaUrl.resultUrl,
            type: 'POST',
            dataType: 'json',
            data: {
                currentPage: '1',
                row: '10',
                empId: localStorage.getItem("empId"),
                deptName: '市场部'
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    var olist = data.result;
                    var num = 0;
                    for (var i = 0; i < olist.length; i++) {
                        num++;
                        var otr = $('<tr></tr>');
                        otr.appendTo($(".tabletext").find('table'));
                        $('<td>' + num + '</td>').appendTo(otr);
                        $('<td>' + olist[i].studentName + '</td>').appendTo(otr);
                        if (olist[i].studentSex == 1) {
                            var sex = '男'
                        } else {
                            var sex = '女'
                        }
                        $('<td>' + sex + '</td>').appendTo(otr);
                        $('<td>' + olist[i].age + '</td>').appendTo(otr);
                        $('<td>' + olist[i].telphone + '</td>').appendTo(otr);
                        $('<td>' + olist[i].schoolName + '</td>').appendTo(otr);
                        $('<td>' + olist[i].major + '</td>').appendTo(otr);
                        $('<td>' + olist[i].stateName + '</td>').appendTo(otr);
                        $('<td>' + olist[i].emergencyName + '</td>').appendTo(otr);
                        $('<td>' + olist[i].emergencyContact + '</td>').appendTo(otr);
                    }
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo)
            }
        })
        $.ajax({
            url: SetUrl.quotaUrl.emp,
            type: 'POST',
            dataType: 'json',
            data: {
                // empId: '10003',
                jobName: '市场经理',
                deptName: '市场部'
            },
            success: function (data) {
                console.log(data)
                if (data.code == 100) {
                    var ojob = data.job;
                    for (var i = 0; i < ojob.length; i++) {
                        $('<option>' + ojob[i] + '</option>').appendTo($('#lxcselector1'))
                    }
                    $('#lxcselector1').change(function () {
                        $.ajax({
                            url: SetUrl.quotaUrl.emp,
                            type: 'get',
                            dataType: 'json',
                            data: {
                                jobName: '市场经理',
                                deptName: $('#lxcselector1').val()
                            },
                            success: function (data) {
                                console.log(data)
                                if (data.code == 100) {
                                    $("#lxcselector2").html('');
                                    console.log(data);
                                    var oemp = data.emp;
                                    for (var i = 0; i < oemp.length; i++) {
                                        $('<option>' + oemp[i] + '</option>').appendTo($('#lxcselector2'))
                                    }
                                }
                            },
                            error: function (xhr, errorInfo) {
                                console.log(errorInfo)
                            }
                        })
                    })
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo)
            }
        })
    })
    //簇状图请求
    $.ajax({
        url: SetUrl.quotaUrl.grap,
        type: 'POST',
        dataType: 'json',
        data: {
            empId: localStorage.getItem("empId"),
            deptName: '市场部',
            empName: '',
            startTime: '2019-10-01 00:00:00',
            endTime: ''
        },
        success: function (data) {
            console.log(data);
            if (data.code == 100) {

                var applyArr = [];
                var rateArr = [];
                var referArr = [];
                for (var i = 0; i < data.result.length; i++) {
                    applyArr.push(data.result[i].apply)
                    rateArr.push(parseInt(data.result[i].rate) * 100)
                    referArr.push(data.result[i].refer)
                }
                //簇状图
                var myChart = echarts.init(document.getElementById('chart'));
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },

                    legend: {
                        data: ['报名量', '咨询量', '转化率']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '人数（人）',
                            min: 0,
                            max: 10,
                            interval: 2,
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                        {
                            type: 'value',
                            name: '百分比',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '报名量',
                            type: 'bar',
                            data: applyArr
                        },
                        {
                            name: '咨询量',
                            type: 'bar',
                            data: referArr
                        },
                        {
                            name: '转化率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: rateArr
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    })
    $('#search').click(function () {
        $.ajax({
            url: SetUrl.quotaUrl.resultUrl,
            type: 'POST',
            dataType: 'json',
            data: {
                currentPage: '1',
                row: '10',
                empId: '10003',
                start: $('#beginday').val(),
                end: $('#beginday1').val(),
                onepeopleName: $('#lxcselector2').val(),
                deptName: $('#lxcselector1').val()
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    $(".tabletext").find('table').html('');
                    var alist = data.result;
                    var num = 0;
                    for (var i = 0; i < alist.length; i++) {
                        num++;
                        var otr = $('<tr></tr>');
                        otr.appendTo($(".tabletext").find('table'));
                        $('<td>' + num + '</td>').appendTo(otr);
                        $('<td>' + alist[i].studentName + '</td>').appendTo(otr);
                        if (alist[i].studentSex == 1) {
                            var sex = '男'
                        } else {
                            var sex = '女'
                        }
                        $('<td>' + sex + '</td>').appendTo(otr);
                        $('<td>' + alist[i].age + '</td>').appendTo(otr);
                        $('<td>' + alist[i].telphone + '</td>').appendTo(otr);
                        $('<td>' + alist[i].schoolName + '</td>').appendTo(otr);
                        $('<td>' + alist[i].major + '</td>').appendTo(otr);
                        $('<td>' + alist[i].stateName + '</td>').appendTo(otr);
                        $('<td>' + alist[i].emergencyName + '</td>').appendTo(otr);
                        $('<td>' + alist[i].emergencyContact + '</td>').appendTo(otr);
                    }

                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo)
            }
        })
    })

    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginday'
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginday1'
        });
    });

    //分页
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 10, // 总页码
        buttonNum: 1, //要展示的页码数量
        canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
        showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            // console.log(num);
        }
    });


</script>

</html>